import {View,Button} from '@tarojs/components';
import Taro,{useState} from '@tarojs/taro';
// https://jspang.com/detailed?id=59#toc237
// https://taro.aotu.io/
function Blog(){
    // useState 一定要有一个初始值
    const [blogTtile,setBlogTtile] = useState('这里是传递的第一个参数')
    const [blogTtile2,setBlogTtile2] = useState('这里是传递的第二个参数')
    const navigateToGotoIndex =()=>{
        // 最普通的路由跳转
        Taro.navigateTo({
            url:"/pages/index/index?blogTtile="+blogTtile+'&blogTtile2='+blogTtile2
        })
    }
    // 路由重定向 当前页面会在页面栈中消失
    const redirectToGotoIndex =()=>{
        Taro.redirectTo({
            url:"/pages/index/index"
        })
    }

    const myForArr = [
        {
            id:1,
            name:'春华'
        },
        {
            id:2,
            name:'菜溪'
        },
        {
            id:3,
            name:'浚县'
        },
        {
            id:4,
            name:'欧欧'
        },
    ]
    let myIf = 1;
    console.log('myIf: ', myIf);
    return(
        <View>
            这里是blog页面
            <Button onClick={navigateToGotoIndex}>跳转至index页面</Button>
       <Button  onClick={redirectToGotoIndex} >路由重定向到index页面</Button>
      {
          myForArr.map((v,i)=><View
          key={i}
          >{
            v.id +':'+
            v.name}</View>)
      }
      {
          myForArr.map((v,i)=><View
          key={i}
          >{
        myIf == i ? v.name : ''
          }</View>)
      }
      {
          myForArr.map((v,i)=><View>
           { v.id == myIf && v.name}
          </View>)
      }
      
        </View>
    )
}
export default Blog

// ! 跳转到目的页面，打开新页面
// Taro.navigateTo({
//     url: '/pages/page/path/name'
//   })
  
  // ! 跳转到目的页面，在当前页面打开
//   Taro.redirectTo({
//     url: '/pages/page/path/name'
//   })

// navigateTo: 
// 最基本的跳转方式，可以返回上级页面。三端都支持的，小程序、H5、React Native。
// redirectTo：
// 不记录上集页面，直接跳转。三端都支持的，小程序、H5、React Native。
// switchTab： 
// Tab之间进行切换，这个要配合Taro的导航栏一起使用，三端都支持的，小程序、H5、React Native。
// navigateBack:
//  返回上一级页面，这个在小程序中常使用，三端都支持的，小程序、H5、React Native。
// relaunch：
// 关闭所有额面，打开到应用内某个页面。三端都支持的，小程序、H5、React Native。
// getCurrentPages:
// 获取当前页面信息所用，这个H5是不支持的。（注意）